<template>
	<view class="modal" v-if="isDialogVisible">
		<view class="line">
		</view>
		<view class="title">
			<!-- <image style="display: block;width: 50rpx;height: 50px;" src="../../../static/playMarket/yifanshang.png"
				mode=""></image> -->
			<text>选取箱子</text>
		</view>
		<view class="list">
			<view class="list-item" v-for="(item,index) in yifanshangList" :key='index' @click="setBox(item.id)">
				<image style="width: 100%;height: 100%;" src="../../../static/playMarket/mangheBGC.png" mode=""></image>
				<image style="width: 100%;height: 50%; position: absolute;top: 20rpx;" :src="item.thumb" mode="">
				</image>
				<view class="footer">
					{{item.nonZeroCount}}/{{item.skuTotal}}
				</view>
				<!-- <view class="tips">
					<view class="tips-item">
						<text>Last赏</text><text>1/1</text>
					</view>
					<view class="tips-item">
						<text>随机赏 </text><text>1/1</text>
					</view>
					<view class="tips-item">
						<text>A赏</text> <text>1/1</text>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		yifangshi,
	} from "@/api/blind.js"
	export default {
		data() {
			return {
				show: true,
				yifanshangList: [],
				isDialogVisible: false,

			}
		},
		props: ["dialogVisible", "boxUuid"],
		computed: {
			dialogVisibility() {
				return this.dialogVisible
			}
		},
		created() {

			if (this.dialogVisible) {
				this.isDialogVisible = true;
				this.getlist();
			}
		},
		methods: {
			getlist() {
				this.$http(`/yfs/${this.boxUuid}`, "get").then(res => {
					this.yifanshangList = res.data.list;
					this.yifanshangList.forEach(item => {
						item.nonZeroCount = item.sku.filter(value => value !== 0).length;
					});
					return this.yifanshangList;
				})
			},
			setBox(id) {
				console.log(id);
				this.isDialogVisible = false
				this.$emit("close", id);
			}

		}
	}
</script>

<style lang="scss" scoped>
	.modal {
		width: 100%;
		height: 60%;
		border-top-left-radius: 100rpx;
		border-top-right-radius: 100rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;

		.line {
			width: 150rpx;
			height: 30rpx;
			background-color: #797979;
			margin: 40rpx auto;
			border-radius: 20rpx;

		}

		.title {
			font-weight: bolder;
			font-size: 40rpx;
			margin-left: 80rpx;
		}

		.list {
			width: 90%;
			height: 700rpx;
			border-radius: 20rpx;
			background-color: rgb(69, 69, 69);
			margin: 20rpx auto;
			padding: 20rpx;
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;

			overflow-y: auto;

			.list-item:nth-child(3n) {
				margin-right: 0;
			}

			.list-item {
				width: 200rpx;
				height: 300rpx;
				position: relative;
				overflow: hidden;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				margin-right: 20rpx;

				.footer {
					position: absolute;
					width: 100%;
					height: 90rpx;
					line-height: 90rpx;
					bottom: 0;
					z-index: 999;
					text-align: center;
					background: linear-gradient(135deg, #6C43FF, #9165FF);
				}

				.tips {
					position: absolute;
					right: -2rpx;
					bottom: 90rpx;
					width: 90rpx;
					height: 80rpx;
					font-size: 15rpx;

					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.tips-item {
						background-color: rgb(137, 144, 144);
						padding: 0 10rpx;
						display: flex;
						justify-content: space-between;
						border-radius: 20rpx;
					}
				}
			}
		}

	}
</style>